<template>
  <el-select
    v-bind="attrs"
    v-model="selectValue"
    filterable
    class="type-select"
    @change="$emit('change', $event)"
  >
    <el-option
      v-for="item in items"
      :key="item[valueField]"
      :label="item[textField]"
      :value="item[valueField]"
    >
      <slot :item="item"></slot>
    </el-option>
  </el-select>
</template>


<script>
export default {
  name: 'type-select',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: null
    },
    items: {
      type: Array
    },
    textField: {
      type: String,
      default: 'text'
    },
    valueField: {
      type: String,
      default: 'value'
    }
  },
  data() {
    return {
      selectValue: this.value
    }
  },
  watch: {
    value(val) {
      this.selectValue = val;
    }
  },
  beforeCreate() {
    const defaults = {
      clearable: true
    };
    this.attrs = Object.assign({}, defaults, this.$attrs);
  }
}
</script>